import Vue from 'vue'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import '@/icons' // icon
import '@/permission' // permission control
// 导入组件
import ComponentObj from '@/components/index.js'
// 注册
Vue.use(ComponentObj)

// set ElementUI lang to EN
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
Vue.use(ElementUI)
Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})
// 旭哥的经验:
// 1. 写需求(代码)的套路 先静后动
// (1): 明确需求, 明确目标 (你要知道做完的效果是什么?想要什么?)
// 例如: 我要做登录, 最终效果, 输入账号密码, 点击登录, 提示登录成功
// (2): html+css -> 要的页面先准备一下 (不要管js和功能) -铺页面
// (3): 铺数据/改数据/校验/收集数据(v-model) -> 微调页面文字, 有数据要请求铺设到页面上
// (4): js入场编写交互功能 (小步一个个小功能实现) -> 逻辑(前端先做好)
// (5): 如果需要调用接口, 在和后端配合, 调用ajax->请求

// 2. 封装函数, 什么时候需要参数, 什么时候需要返回return
// (1): 函数内, 某个值自己内部不能确定/每次函数调用都不一样, 必须留好形参让外传入
// (2): 函数调用处(外面), 需要函数内处理后的"结果", 必须return出去

// 3. 什么是跨域
// (1): 跨域是"浏览器"对"ajax"做出的同源策略限制
// (2): 同源指的是, 网页在浏览器打开时, 地址栏里的地址中协议, 域名, 端口
// 和内嵌的ajax请求的url地址中协议, 域名, 端口有一个对不上就跨域了
// 注意: 服务器和服务器之间的请求是没有跨域限制的

// 4. 如何解决跨域问题?
// 方式1: jsonp
// 注意: jsonp和json没有关系, JSON是一种序列化数据的技术, JSONP是解决跨域的技术
// 使用: script标签的src属性, 来发送请求而且它不受跨域限制, 请求后让后台返回一个函数调用字符串+数据, 在前端进入到script标签之间, 当做js代码执行, 把数据带回来
// 特点: 需要前端传递一个方法名, 后端返回函数调用格式的字符串
// 要求: 前端和后端同时支持

// 方式2: cors
// 概念: 跨域资源共享, 现代浏览器前端默认支持的, 但是还需要后端开启才行
// 使用: cors是让后端进行设置
// 特点: 你可以在响应头里看看有没有一个叫"Access-Control-Allow-Origin"字段(是后台设置的, 作用: 允许哪些源进行跨域访问)
// 要求: 前端什么都不用做, 正常使用axios发送ajax请求, 只需要后端开启(前端无需感知)

// 方式3: 代理服务器
// 针对: 后端不开跨域支持, 我们前端自己用代理服务器也能拿到数据
// 原理: 前端代理服务器, 请求后端接口服务器, 因为服务器之间没有跨域限制
// 好在: vue脚手架有一个webpack开发服务器支持, 给这个服务器进行配置, 让他支持代理转发
// 1. 让axios请求, 不要直接请求外链地址(http开头的), 而是要请求/开头, 代表当前所在服务器(http://localhost:9528)
// 2. 配置代理转发的规则, vue.config.js中devServer的proxy选项内配置(让开发服务器支持代理转发)
// 前提: 后端真的有"接口地址"可以使用, 才能用ajax请求 (前后端分离的项目)

// 特殊: 后端渲染的项目(SSR/nuxt.js技术->新学vue语法), 数据在后端渲染完毕返回给前端网页不用你使用ajax请求

// 5. 后台返回数据的类型
// 类型1: 失败的请求, 后台会返回400的http状态码(错误)
// "http状态码"来标记失败情况

// 类型2: 无论成功/失败的请求, 后台都会返回http状态200(ok)
// 但是在"数据的字段"上区别成功/失败

// 6. 旭哥经验
// 听懂了, 掌握20%
// 抄出来, 掌握30%
// 根据自己思路, 写出来 50%
// 能给自己, 讲讲, 掌握60%
// 能给别人讲明白 80%
// 能写出文字, 给别人讲明白/设计例子, 100%
